var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "components/common/base-component", "mobile/services/shoppingService", "maishu-services-sdk", "components/common/component", "react", "maishu-ui-toolkit"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const base_component_1 = require("components/common/base-component");
    const shoppingService_1 = require("mobile/services/shoppingService");
    const maishu_services_sdk_1 = require("maishu-services-sdk");
    const component_1 = require("components/common/component");
    const React = require("react");
    const ui = require("maishu-ui-toolkit");
    let Categories = class Categories extends base_component_1.BaseComponent {
        constructor(props) {
            super(props);
            this.state = {};
            this.shopping = this.createService(shoppingService_1.ShoppingService);
            this.imageService = this.createService(maishu_services_sdk_1.ImageService);
        }
        componentDidMount() {
            this.shopping.categories().then(categories => {
                this.setState({ categories });
            });
        }
        render() {
            var result = this.props.showIcon ?
                this.renderWithIcons() : this.renderWithoutIcons();
            return result;
        }
        renderWithIcons() {
            var categories = this.state.categories;
            return React.createElement("div", { className: "categories-control clearfix" }, categories ? categories.map(item => (React.createElement("a", { key: item.Id, href: `#home_productList?categoryId=${item.Id}`, className: "col-xs-4" },
                React.createElement("img", { src: this.imageService.imageSource(item.ImagePath, 100, 100), className: "img-responsive", ref: (e) => e ? ui.renderImage(e, { imageSize: { width: 100, height: 100 } }) : null }),
                React.createElement("span", { className: "mini interception" }, item.Name)))) : null);
        }
        renderWithoutIcons() {
            var categories = this.state.categories;
            categories = (categories || []).sort((a, b) => {
                return (a.SortNumber || 0) - (b.SortNumber || 0);
            });
            return React.createElement("div", { className: "categories-control clearfix" }, categories.map((item, i) => (React.createElement("div", { key: item.Id || i, className: "col-xs-6" },
                React.createElement("div", { className: "well" },
                    React.createElement("a", { href: `#home_productList?categoryId=${item.Id}` },
                        React.createElement("span", { className: "mini interception" }, item.Name)))))));
        }
    };
    Categories = __decorate([
        component_1.component()
    ], Categories);
    exports.Categories = Categories;
});
